<template>
    <div class="content">
        <el-button :loading="loadingOfButton" class="btn" :color="color" @click="click" size="large" type="primary">
            <div>
                <slot></slot>
            </div>
        </el-button>

        <!-- 成功提示 -->
        <div :class="'success-div '+successParams.divClassName" v-if="successParams.show">
            <span class="success-div_span">{{ successParams.text }}</span>
        </div>

        <!-- 错误提示 -->
        <div :class="'error-div '+errorParams.divClassName" v-if="errorParams.show">
            <span class="error-div_span">{{ errorParams.text }}</span>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { method } from 'lodash';
import { markRaw,reactive, ref, defineProps, defineEmits, defineExpose } from 'vue';
const emits = defineEmits(['click']);

const props = defineProps({
    /**
     * 按钮颜色
     */
    color: {
        type: String,
        default: '#303133'
    }
});


const loadingOfButton = ref(false);

/**
 * 点击事件
 * 用来触发父组件的click事件
 */
const click = () => {
    emits('click');
};


/**
 * 设置按钮为loading状态
 */
const loading = (time:number) => {
    time = time || 2000;
    loadingOfButton.value = true;
    setTimeout(() => {
        loadingOfButton.value = false;
    }, time);
}

/**
 * 取消按钮的loading状态
 */
const cancelLoading = () => {
    loadingOfButton.value = false;
}

const errorParams = reactive({
    show: false,
    text: "",
    divClassName: "",
    errorDivClassName: ""
});

const successParams = reactive({
    show: false,
    text: "",
    divClassName: "",
    errorDivClassName: ""
});

/**
 * 设置按钮为成功状态
 * @param time 成功状态持续时间
 * @param text 成功状态显示的文字
 */
const success = (text: string, time: number) => {
    time = time || 2000;
    successParams.divClassName = "";
    successParams.text = text;
    successParams.show = true;
    setTimeout(() => {
        successParams.divClassName = "cancel";
        setTimeout(() => {
            successParams.show = false;
        }, 2000);
    }, time);
}

/**
 * 设置按钮为错误状态
 * @param time 错误状态持续时间
 */
const error = (text: string, time: number) => {
    time = time || 2000;
    errorParams.divClassName = "";
    errorParams.text = text;
    errorParams.show = true;
    setTimeout(() => {
        errorParams.divClassName = "cancel";
        setTimeout(() => {
            errorParams.show = false;
        }, 2000);
    }, time);
}

// 暴露给父组件的方法
defineExpose({
    loading,
    cancelLoading,
    error,
    success
})

</script>

<style lang="scss" scoped>
.content {
    position: relative;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.success-div{
    position: absolute;
    background-color: #000 !important;
    color: #fff !important;
    text-align: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    animation-name: success-div-animation;
    animation-duration: 2s;

    .success-div_span {
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 15px;
        font-weight: lighter;
    }
    .cancel {
        opacity: 0;
    }
}

.error-div {
    position: absolute;
    background-color: #f56c6c !important;
    color: #fff !important;
    text-align: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    animation-name: error-div-animation;
    animation-duration: 2s;

    .error-div_span {
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 15px;
        font-weight: lighter;
    }
    .cancel {
        opacity: 0;
    }
}

@keyframes error-div-animation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.cancel {
    animation-name: cancel-animation;
    animation-duration: 2s;
    background-color: aqua;
}

@keyframes cancel-animation {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.btn {
    width: 100%;
    height: 50px;
}</style>